<template>
  <div class="checkbox-wrapper" @click="onClick" :class="{'checked':checked, [checkedClass]:checked}">
    <div ref="border" class="border" :style="{'width': `${iconSize}px`, 'height': `${iconSize}px`}">
      <div ref="icon" class="fdx-icons-selected icon" :style="{'font-size':`${iconSize}px`}"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'check-box',
  props: {
    value: {
      type: Object | String | Number,
      default: null
    },
    data: {
      type: Object,
      default: () => {
        return {
        }
      }
    },
    checkedValue: {
      type: Object | String | Number,
      default: () => {
        return true
      }
    },
    uncheckedValue: {
      type: Object | String | Number,
      default: null
    },
    checkedClass: {
      type: String,
      default: ' '
    },
    iconSize: {
      type: Number,
      default: 18
    }
  },
  data() {
    return {
      currentValue: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.init()
    })
  },
  computed: {
    checked() {
      return this.currentValue === this.checkedValue
    }
  },
  methods: {
    onClick(evt) {
      this.toggleCheck()
    },
    toggleCheck() {
      const param = {
        sender: this,
        checked: this.checked,
        value: this.currentValue,
        data: this.data,
        cancel: false
      }
      this.fireEvent('beforeChange', param)
      if (param.cancel === true) {
        return
      }
      this.doCheck(!this.checked)
      this.fireEvent()
    },
    setStatus(checked) {
      var value = null
      if (checked) {
        value = this.checkedValue
      } else {
        value = this.uncheckedValue
      }
      this.currentValue = value
      this.$emit('input', value)
    },
    doCheck(checked) {
      this.setStatus(checked)
    },
    fireEvent(evtName, param) {
      this.$emit(evtName || 'change', param || {
        sender: this,
        checked: this.checked,
        value: this.currentValue,
        data: this.data
      })
    },
    init() {
      this.currentValue = this.value
      if (this.checked) {
        this.fireEvent()
      }
    },
    getValue() {
      return this.checked ? this.checkedValue : this.uncheckedValue
    }
  },
  watch: {
    value(newVal) {
      this.currentValue = newVal
    },
    data(newVal) {
      this.currentValue = (newVal.selected ? newVal.value : null)
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../assets/sass/_vars";

.checkbox-wrapper {
  display: flex;
  align-items: stretch;
  justify-content: center;

  .border {
    display: flex;
    border: solid 1px $gray-ccc;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;

    .icon {
      display: flex;
      justify-content: center;
      align-items: center;

      &::before {
        visibility: hidden;
        color: $gray-ccc;
        transition: all ease 100ms;
      }
    }
  }

  &.checked {
    .border {
      border: none;
      .icon {
        &::before {
          visibility: visible;
          color: #26a2ff;
        }
      }
    }
  }
}
</style>
